import React, { useRef, useImperativeHandle } from 'react'
// 注意: 由于函数组件不能使用refs技术,所以如果非要在函数组件上写ref属性,并绑定ref对象.则可以使用React.forwardRef
// React.forwardRef的作用: 1. 函数组件上写ref,就不会警告了 2. 会将写在函数组件上的ref对象,传递到函数组件内部
// React.forwardRef使用的方式:
export default React.forwardRef(function Test(props, appRef) {
  const testRef = useRef()
  // 给使用Test组件的人,暴露的是一个普通对象,这个对象中有一个setColor的方法可以修改颜色.但是没有暴露div的真实dom
  //   appRef.current = {
  //     setColor(color) {
  //       testRef.current.style.color = color
  //     },
  //   }

  // 使用useImprativeHandle实现上面的代码
  // useImperativeHandle作用: 给ref对象的current属性赋值
  useImperativeHandle(appRef, () => {
    // 这个函数中返回值是什么,那么appRef.current的值就是什么
    return {
      setColor(color) {
        testRef.current.style.color = color
      },
    }
  })

  return <div ref={testRef}>Test-函数组件</div>
})
